<script setup>

const topTbasItem = [
  {
    id: 1,
    icon: '/static/AI/dialogue.svg',
    text: 'AI对话'
  },
  {
    id: 2,
    icon: '/static/AI/painting.svg',
    text: 'AI绘图'
  },
  {
    id: 3,
    icon: '/static/AI/music.svg',
    text: 'AI音乐'
  },
  {
    id: 4,
    icon: '/static/AI/video.svg',
    text: 'AI视频'
  }
]
const twoTabsItem = [
  {
    id: 1,
    icon: '/static/AI/prompt.svg',
    text: '学AI提示词'
  },
  {
    id: 2,
    icon: '/static/AI/learn.svg',
    text: '学用AI画图'
  },
  {
    id: 3,
    icon: '/static/AI/ai-video.svg',
    text: '学AI做视频'
  },
  {
    id: 4,
    icon: '/static/AI/excellent.svg',
    text: '优秀AI作品'
  }
]
const threeItem = [
  {
    id: 1,
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
    name: '机器人技术',
    arouthname: '库杜斯'
  },
  {
    id: 2,
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
    name: '机器人技术',
    arouthname: '库杜斯'
  },
  {
    id: 3,
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
    name: '机器人技术',
    arouthname: '库杜斯'
  },
]

const itemItems = [
  {
    id: 2,
    title: '这里写课程标题，如果标题长换...',
    content: '课程简介文本内容的开头在',
    person: '5608',
    price: '99.9',
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
  },
  {
    id: 2,
    title: '这里写课程标题，如果标题长换...',
    content: '课程简介文本内容的开头在',
    person: '5608',
    price: '99.9',
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
  },
  {
    id: 2,
    title: '这里写课程标题，如果标题长换...',
    content: '课程简介文本内容的开头在',
    person: '5608',
    price: '99.9',
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
  },
  {
    id: 2,
    title: '这里写课程标题，如果标题长换...',
    content: '课程简介文本内容的开头在',
    person: '5608',
    price: '99.9',
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
  },
  {
    id: 2,
    title: '这里写课程标题，如果标题长换...',
    content: '课程简介文本内容的开头在',
    person: '5608',
    price: '99.9',
    image: 'https://npimg.hellouikit.com/e5/db/e5dbb3a28878a7b29061a66b012df138?imageView2/2/w/1000',
  },
];

const topTbasItemClick = (item) => {
  uni.navigateTo({
    url: '/pages/AI/components/AI-interaction?id=' + item.id + '&title=' + item.text,
  })
}

const twoTabsItemClick = (item) => {
  const ids = item.id;
  if (ids === 1 || ids === 2 || ids === 3) {
    uni.navigateTo({
      url: '/pages/AI/components/AI-content?id=' + ids + '&title=' + item.text
    })
  } else if (ids === 4) {
    uni.navigateTo({
      url: '/pages/AI/components/AI-video?title=' + item.text
    })
  }
}

</script>
<template>
  <fui-nav-bar :isFixed="true" :isOccupy="true" title="AI专场">
  </fui-nav-bar>
  <view class="AI">
    <view class="AI-top-tabs">
      <view v-for="(item, index) in topTbasItem" :key="index" class="top-tabs-item-box" @click="topTbasItemClick(item)">
        <view class="top-tabs-item-box-icon">
          <image :src="item.icon" class="top_image"/>
        </view>
        <view class="top-tabs-item-box-text">{{ item.text }}</view>
      </view>
    </view>
    <view class="AI_tabs_two">
      <view v-for="(item, index) in twoTabsItem" :key="index" class="tabs_two_items" @click="twoTabsItemClick(item)">
        <view class="tabs_two_items_box">
          <image :src="item.icon"/>
        </view>
        <text>{{ item.text }}</text>
      </view>
    </view>
    <view style="width: 100%;height: 80rpx;display: flex;align-items: center">
      <fui-section :size="28" color="rgba(66, 66, 66, 1)" title="优秀AI作品"></fui-section>
    </view>
    <view class="excellent_work">
      <view v-for="(item, index) in threeItem" class="work_item_box">
        <image :src="item.image"/>
        <view style="font-size: 28rpx;color: rgba(18, 134, 140, 1);">{{ item.name }}</view>
        <view style="font-size: 24rpx;color: rgba(153, 153, 153, 1)">{{ item.arouthname }}</view>
      </view>
    </view>
    <view style="width: 100%;height: 80rpx;display: flex;align-items: center">
      <fui-section :size="28" color="rgba(66, 66, 66, 1)" title="精选AI课件"></fui-section>
    </view>
    <view v-for="(item, index) in itemItems" :key="index" class="item_box">
      <image :src="item.image"/>
      <view class="item_box_content">
        <view style="font-size: 28rpx;color: rgba(66, 66, 66, 1);">{{ item.title }}</view>
        <view style="font-size: 24rpx;color: rgba(153, 153, 153, 1);">{{ item.content }}</view>
        <view class="item_price_box">
          <view style="font-size: 24rpx;color: rgba(153, 153, 153, 1);">{{ item.person }}人已学习</view>
          <view style="font-size: 24rpx;color: rgba(241, 69, 69, 1);">¥{{ item.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.AI {
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .AI-top-tabs {
    width: 100%;
    height: 261.78rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .top-tabs-item-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;

      .top-tabs-item-box-icon {
        width: 146.76rpx;
        height: 142.88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rpx;
        background: rgba(57, 178, 184, 1);

        .top_image {
          width: 75rpx;
        }
      }

      .top-tabs-item-box-text {
        font-size: 28rpx;
        color: rgba(45, 49, 66, 1);
        margin: 10rpx;
      }
    }
  }

  .AI_tabs_two {
    width: 100%;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .tabs_two_items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;

      .tabs_two_items_box {
        width: 96rpx;
        height: 105.5rpx;
        border-radius: 30.38rpx;
        border: 1.216rpx solid #FFF;
        background: #FFF;
        box-shadow: 0 3.038rpx 9.114rpx 0 rgba(255, 255, 255, 0.15) inset;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 58rpx;
          height: 58rpx;
        }
      }

      text {
        font-size: 24rpx;
        color: rgba(102, 102, 102, 1);
        margin: 10rpx;
      }
    }
  }

  .excellent_work {
    width: 100%;
    height: 380rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .work_item_box {
      width: 220rpx;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      image {
        width: 100%;
        height: 280rpx;
        border-radius: 25.2rpx;
      }
    }
  }

  .item_box {
    margin: 10rpx;
    width: 100%;
    height: 160rpx;

    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      width: 217rpx;
      height: 100%;
      border-radius: 16rpx;
    }

    .item_box_content {
      height: 100%;
      width: 467.34rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .item_price_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>